<!--
 * @Author: 宋杰
 * @Date: 2020-12-28 17:53:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-18 10:04:54
 * @Description: 一家十一口(猜一字) 游客对外展示信息
-->
<template>
  <div>
    <div class="head">
      <span class="navbar-brand">
        <img src="../../../static/img/logo.png" />
      </span>
      <div class="wenzi">
        <span @click="guanliyuan">管理员入口</span>
        <span style="margin-left: 25px" @click="jigou">机构入口</span>
      </div>
    </div>
    <div class="divBox">
      <!-- 机构一览 -->
      <div class="div3 div5">
        <!-- 搜索模块 -->
        <div class="topBox3">
          <div class="tub">机构一览</div>
          <div style="position: absolute; right: 10px;margin-right:5%">
            <el-select
              v-model="organizationValue"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="sousuoBox">
              <i class="el-icon-search"></i>
              <span>查找</span>
            </el-button>
          </div>
        </div>
        <!-- 主体内容列表 -->
        <div class="conBox3">
          <div
            class="conBoxList"
            v-for="(item, index) in conBox3List"
            :key="index"
            :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
          >
            <div class="conBox3_3">
              <div>
                <a style="cursor: pointer;" @click="jigoutz">{{
                  item.jigou
                }}</a>
              </div>
              <!-- 机构评星 -->
              <div class="pinxin">
                <el-rate v-model="ratingValue" :colors="colors"> </el-rate>
              </div>
            </div>
            <div class="conBox3_2">
              <div>单位性质</div>
              <div>{{ item.xinzhi }}</div>
            </div>
            <div class="conBox3_2">
              <div>所在城市</div>
              <div>{{ item.chenshi }}</div>
            </div>
            <div class="conBox3_2">
              <div>经营内容</div>
              <div>{{ item.jigou2 }}</div>
            </div>
          </div>
        </div>
        <!-- 更多按钮-->
        <div class="genduobox">
          <el-button type="primary" plain round
            ><span>查看更多</span><i class="el-icon-right"></i
          ></el-button>
        </div>
      </div>

      <!-- 行政公示 、 评价标准 -->
      <div class="div3 div4">
        <!-- 行政公示 -->
        <div class="xingzhengbox">
          <div class="topBox3">
            <div class="tub">行政公示</div>
          </div>
          <div class="conBox3">
            <div
              class="conBoxList"
              v-for="(item, index) in administrativeList"
              :key="index"
              :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
            >
              <div class="conBox4_1">
                <div>{{ item.time }}</div>
                <div>{{ item.text }}</div>
              </div>
            </div>
          </div>
          <!-- 更多页 -->
          <div class="genduobox">
            <el-button type="primary" plain round
              ><span>查看更多</span><i class="el-icon-right"></i
            ></el-button>
          </div>
        </div>
        <!-- 评价标准 -->
        <div class="biaozhunbox">
          <div class="topBox3">
            <div>评价标准</div>
          </div>
          <div class="conBox3">
            <div
              class="conBoxList2"
              v-for="(item, index) in evaluateList"
              :key="index"
              :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
            >
              <div class="conBox4_2">
                <div>{{ item.name2 }}</div>
                <div>{{ item.fenshu }} 分</div>
              </div>
            </div>
          </div>
          <!-- 更多页 -->
          <div class="genduobox">
            <el-button type="primary" plain round
              ><span>查看更多</span><i class="el-icon-right"></i
            ></el-button>
          </div>
        </div>
      </div>
      <!-- 行政公示 、 评价标准end -->
    </div>
    <!-- 底部开始 -->
    <div class="footers">
      <div class="footer-center">
        <img src="../../../static/img/footrr.png" />
        <p style="margin-top:10px">
          版权所有：©江苏省建设教育协会 &#160; | &#160;
          地址:南京市南通路118号茂悦港5号楼8楼 &#12288;| &#12288; 邮编:210036
          &#12288;|&#12288;苏ICP备17047788号
        </p>
      </div>
      <!-- <div class="footer-right">
        <div style="float:left">
          <p>网站服务</p>
          <p>返回首页</p>
          <p>行业服务</p>
        </div>
        <div style="float:right;margin-left:10px">
          <p>加入会员</p>
          <p>远程教育</p>
          <p>开展工作</p>
        </div>
      </div> -->
      <div class="tup">
        <img src="../../../static/img/tuceng.png" />
      </div>
    </div>
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      // 机构一览 ==================================
      organizationValue: [], //搜索输入的文字
      options: [],
      list: [],
      loading: false,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      // 列表
      conBox3List: [
        {
          id: "0",
          name2: "依法办学",
          fenshu: "60",
          jigou: "新东方培训机构",
          jigou2: "计算机、英语、语文...",
          name: "李教授",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          xinzhi: "培训机构",
          chenshi: "南京",
          text:
            "这些天,由人民日报新媒体发起的“你好2021”温暖之夜演出活动视频,持续在短视频平台和社交平台上引发热议。"
        },
        {
          id: "1",
          name2: "依法办学",
          fenshu: "60",
          jigou: "思而学",
          jigou2: "语文、英语、数学...",
          name: "李教授",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          xinzhi: "培训机构",
          chenshi: "南京",
          text:
            "深入学习贯彻习近平新时代中国特色社会主义思想 “深入学习贯彻习近平新时代中国特色社会主义思想”。"
        }
      ],
      // 评星
      ratingValue: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      // 机构一览  end==============================
      // 行政公示  ==============================
      // 行政
      administrativeList: [
        {
          id: "0",
          time: "2020.3.3",
          text:
            "深入学习贯彻习近平新时代中国特色社会主义思想 “深入学习贯彻习近平新时代中国特色社会主义思想”。"
        },
        {
          id: "0",
          time: "2020.3.3",
          text:
            "这些天,由人民日报新媒体发起的“你好2021”温暖之夜演出活动视频,持续在短视频平台和社交平台上引发热议。"
        },
        {
          id: "0",
          time: "2020.3.3",
          text:
            "深入学习贯彻习近平新时代中国特色社会主义思想 “深入学习贯彻习近平新时代中国特色社会主义思想”。"
        },
        {
          id: "0",
          time: "2020.3.3",
          text:
            "这些天,由人民日报新媒体发起的“你好2021”温暖之夜演出活动视频,持续在短视频平台和社交平台上引发热议。"
        },
        {
          id: "0",
          time: "2020.3.3",
          text:
            "深入学习贯彻习近平新时代中国特色社会主义思想 “深入学习贯彻习近平新时代中国特色社会主义思想”。"
        }
      ],
      // 行政公示 end ==========================
      // 评价标准 ==============================
      // 评价
      evaluateList: [
        {
          id: "0",
          name2: "章程",
          fenshu: "1"
        },
        {
          id: "1",
          name2: "证件",
          fenshu: "3"
        },
        {
          id: "2",
          name2: "收费",
          fenshu: "2"
        },
        {
          id: "3",
          name2: "招生广告",
          fenshu: "2"
        },
        {
          id: "4",
          name2: "行为规范",
          fenshu: "2"
        },
        {
          id: "5",
          name2: "经费",
          fenshu: "2"
        },
        {
          id: "6",
          name2: "校址校舍",
          fenshu: "15"
        },
        {
          id: "7",
          name2: "教学设备",
          fenshu: "3"
        }
      ]
      // 评价标准 end==============================
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 机构一览 ==================================
    // 搜索
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
    // 机构一览 end===============================
  },
  //方法集合
  methods: {
    // 机构一览 ==================================
    // 搜索
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 转跳到 "游客对外展示信息"
    jigoutz() {
      this.$router.push({ name: "touristshome" });
    },
    // 机构一览  end==============================

    // 转跳到管理员登录页
    guanliyuan() {
      this.$router.push({ name: "login" });
    },
    // 转跳到机构登录页
    jigou() {
      this.$router.push({ name: "institutions" });
    },
  }
};
</script>
<style scoped>
.divBox {
  width: 100%;
  /* min-height: 100vh; */
  padding: 0 5%;
  background: #f5f6fa;
  border: 1px solid transparent;
}
.div3 {
  /* position: relative; */
  background: #fff;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  margin-top: 12px;
}
.div5 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.sousuoBox {
  margin-left: 10px;
}
.conBoxList {
  display: flex;
  align-items: center;
  min-height: 60px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.biecolor1 {
  background: #f9f9f9;
}
.biecolor2 {
  background: #fff;
}
.conBoxList > div {
  flex: 1;
  text-align: center;
  /* margin-top: 0 !important;
  margin-bottom: 0 !important; */
}
.conBox3_3 {
  flex: 1.5;
}
.conBox3_3 > :nth-child(1),
.conBox3_3 > :nth-child(2) {
  text-align: left;
}
/* 分数 */
.conBox3_1 {
  flex: none !important;
  width: 50px;
  height: 30px;
  border: 1px solid rgb(79, 131, 243);
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  padding: 0 10px;
  color: #2276c3;
}
.conBox3_2 > :nth-child(1) {
  color: rgb(153, 153, 153);
}
.conBox3_3 > :nth-child(2) {
  color: rgb(153, 153, 153);
}
.genduobox {
  height: 60px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.el-button {
  height: 30px !important;
  line-height: 30px;
  padding: 0 10px !important;
  font-size: 14px !important;
  text-align: center;
}
.el-button.is-round {
  padding: 0 10px !important;
}

.div4 {
  margin-bottom: 150px;
  background: transparent !important;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}
.div4 > div {
  background: #fff;
  border-radius: 4px;
}
.xingzhengbox {
  flex: 2;
  margin-right: 16px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.conBox3 {
  flex: 1;
}
.biaozhunbox {
  flex: 1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.conBox4_1 {
  text-align: left !important;
}

.conBoxList2 {
  min-height: 37.5px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.conBox4_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.conBox4_2 > :nth-child(2) {
  color: #2276c3;
}
.head {
  top: 0;
  background-color: #fff;
  text-decoration: none;
  width: 100%;
  z-index: 999;
  height: 52px;
}
.tub {
  height: 49px;
  background: url(../../../static/img/h1-bg.png) no-repeat;
  color: #fff;
  width: 152px;
  position: absolute;
  /* left: -18px; */
  margin-left: -27px;
  padding-left: 15px;
  font-size: 17px;
  margin-top: 10px;
  padding-top: 5px;
}
.wenzi {
  color: #1b2531;
  font-size: 14px;
  right: 0;
  position: absolute;
  left: 87%;
  line-height: 48px;
  cursor: pointer;
}

/* 底部 */
.footers {
  position: fixed;
  bottom: 0;
  background-color: #093b69;
  text-decoration: none;
  width: 100%;
  z-index: 999;
  height: 100px;
}
.footer-center {
  float: left;
  margin: 0;
  color: #fff;
  /* text-align: center; */
  text-decoration: none;
  padding: 1% 0;
  /* line-height: 30px; */
  font-size: 12px;
  margin-left: 40px;
}
.footer-right {
  float: right;
  /* margin: 0; */
  color: #fff;
  /* text-align: center; */
  /* text-decoration: none; */
  /* padding: 1% 0; */
  /* line-height: 18px; */
  font-size: 12px;
  margin-right: 191px;
  /* margin-top: 6px; */
  margin-top: 21px;
}
.tup {
  position: absolute;
  right: 0px;
  margin-top: 16px;
  margin-right: 66px;
}
</style>
